<script>

  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import sheep from '@/sheep';

  export default {
    name: 'presentABouquet',
    components: { UniPopup },
    data() {
      return {
        isPurchase: true,
        unitaryFlower: {},
        purchaseAnimation: '',
        // 献花类型 1:先换 2:贡品
        typeBouquet: 1,
      };
    },
    computed: {
      FAMILY_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    props: {
      ct_flower: {
        type: Array,
        default: () => {
          return [];
        },
      },
      articlesOfTribute: {
        type: Array,
        default: () => {
          return [];
        },
      },
      ct_detail: {
        type: Object,
        default: () => {
          return {};
        },
      },
      cm_time: {
        type: String,
        default: () => {
          return '';
        },
      },
      diyInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    methods: {
      show() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
        this.isPurchase = true;
        setTimeout(() => {
          this.purchaseAnimation = '';
        }, 100);
      },
      async lighten(info) {
        console.log(info);
        this.unitaryFlower = info;
        this.isPurchase = false;
        this.purchaseAnimation = 'leftAnimation';
      },
      reselect() {
        // this.unitaryFlower = {};
        this.isPurchase = true;
        this.purchaseAnimation = 'rightAnimation';
      },
      topUp() {
        sheep.$router.go('/pages/pay/recharge', { is_flag: 1 });
      },
      async purchase(info) {
        if(this.typeBouquet == 1){
          let { code, msg } = await sheep.$api.genealogy.gift({
            ancestral_id: this.ct_detail.id,
            gift_id: this.unitaryFlower.id,
            time: info.s,
          });
          if (code == 1) {
            sheep.$helper.toast('献花成功');
            this.$emit('flowers');
            uni.$emit('presentABouquet');
            this.close();
          } else {
            sheep.$helper.toast(msg);
          }
        }else{
          let { code, msg } = await sheep.$api.genealogy.tribute({
            ancestral_id: this.ct_detail.id,
            tribute_id: this.unitaryFlower.id,
            time: info.s,
          });
          if (code == 1) {
            sheep.$helper.toast('上贡成功');
            this.$emit('flowers');
            uni.$emit('presentABouquet');
            this.close();
          } else {
            sheep.$helper.toast(msg);
          }
        }
      },
    },
  };
</script>

<template>
  <view>
    <uni-popup ref="popup" type="bottom" :mask-click="false">
      <view class="flex flex-column align-center allList">
        <view class="presentABouquet flex align-center justify-between">
          <view class="left flex align-center">
            <view>当前元宝剩余:
              <text class="color_FF4206">{{ diyInfo.score || 0 }}个</text>
            </view>
            <view class="wh_119 hW_40 ml_15 bg_FF4206 color_FFFFFF fs_22 fw_500 flex align-center justify-center"
                  style="border-radius: 8rpx"
                  @click.stop="topUp">
              去充值
            </view>
          </view>
          <image :src="`${FAMILY_URL}/index/citang_icon.png`" @click.stop="close"></image>
        </view>
        <view class="mt_20 mb_20 flex align-center">
          <view class="wh_242 hW_62 fs_34 fw_500 flex align-center justify-center"
                :style="{
                  background:typeBouquet == 1 ? '#FF4206' : 'transparent',
                  color:typeBouquet == 1 ? '#FFFFFF' : '#52360D',
                  border:typeBouquet == 1 ? '2rpx solid #FF4206' : '2rpx solid #E5E5E5',
                }"
                style="border-radius: 31rpx 0 0 31rpx"
                @click.stop="typeBouquet = 1"
          >
            鲜花
          </view>
          <view class="wh_242 hW_62 fs_34 fw_500  flex align-center justify-center"
                style="border-radius: 0 31rpx 31rpx 0"
                :style="{
                  background:typeBouquet == 2 ? '#FF4206' : 'transparent',
                  color:typeBouquet == 2 ? '#FFFFFF' : '#52360D',
                  border:typeBouquet == 2 ? '2rpx solid #FF4206' : '2rpx solid #E5E5E5',
                }"
                @click.stop="typeBouquet = 2"
          >
            贡品
          </view>
        </view>
        <view class="wh_750" style="height: 956rpx;position: relative">
          <scroll-view :scroll-y="isPurchase" class="wh_750" style="height: 956rpx"
                       v-if="typeBouquet == 1"
          >
            <view class="wh_750 flex align-center justify-center" style="position: relative">
              <view class="all">
                <view class="list flex flex-column align-center justify-around"
                      v-for="(item,index) in ct_flower"
                      :key="index"
                      @click.stop="lighten(item)"
                >
                  <image class="imageList" :src="item.image" mode="aspectFit"></image>
                  <view class="title flex align-center justify-center mt_17">{{ item.title }}</view>
                  <view class="button flex align-center justify-center mt_17">
                    去采办
                  </view>
                </view>
              </view>
            </view>
            <view class="hW_50"></view>
          </scroll-view>
          <scroll-view :scroll-y="isPurchase" class="wh_750" style="height: 956rpx"
                       v-else
          >
            <view class="wh_750 flex align-center justify-center" style="position: relative">
              <view class="all">
                <view class="list flex flex-column align-center justify-around"
                      v-for="(item,index) in articlesOfTribute"
                      :key="index"
                      @click.stop="lighten(item)"
                >
                  <image class="imageList" :src="item.image" mode="aspectFit"></image>
                  <view class="title flex align-center justify-center mt_17">{{ item.title }}</view>
                  <view class="button flex align-center justify-center mt_17">
                    去采办
                  </view>
                </view>
              </view>
            </view>
            <view class="hW_50"></view>
          </scroll-view>
          <view class="floralLong bg_FFFFFF flex flex-column align-center" :class="purchaseAnimation">
            <!--            <view @click.stop="reselect">-->
            <!--              取消-->
            <!--            </view>-->
            <view class="wh_708 hW_314 mt_20 flex align-center"
                  style="background: #FEF0CE;border-radius: 8rpx;"
            >
              <image :src="unitaryFlower.image" mode="widthFix" class="wh_257"></image>
              <view class="flex flex-column wh_420">
                <view class="fs_34 fw_500" style="color: #52360D">{{ unitaryFlower.title }}</view>
                <view class="fs_26 fw_500 mt_17" style="color: #52360D">{{ unitaryFlower.desc }}</view>
              </view>
            </view>
            <view class="wh_708 hW_30 mt_30 fs_34 fw_500 flex align-center justify-center"
                  style="color: #52360D;position: relative"
            >
              <image class="wh_30 hW_30"
                     style="position: absolute;left: 0;top: 50%;transform: translateY(-50%)"
                     :src="`${FAMILY_URL}/index/left5.png?x-oss-process=image/resize,w_44,h_44`"
                     @click.stop="reselect"
              ></image>
              <view>
                选择采办时长
              </view>
            </view>
            <scroll-view class="wh_750 hW_544 mt_20" scroll-y>
              <view class="wh_750 flex align-center justify-center">
                <view class="wh_708"
                      style="display: grid;grid-template-columns: repeat(3, 1fr);grid-column-gap: 18rpx;grid-row-gap: 21rpx"
                >
                  <view v-for="(item,index) in unitaryFlower.keyvalue_arr"
                        :key="index"
                        class="flex flex-column align-center justify-around"
                        style="background: #FFF6E2;border-radius: 8rpx"
                  >
                    <view class="fs_23 fw_500 mt_15" style="color: #52360D">
                      采办 {{ item.s }}分钟
                    </view>
                    <view class="fs_23 fw_500 mt_10" style="color: #52360D">
                      消耗
                      <text class="color_FF4206">{{ item.f }}福豆</text>
                    </view>
                    <view
                      class="wh_142 hW_51 mt_15 mb_15 flex align-center justify-center bg_FF4206 fs_31 fw_500 color_FFFFFF"
                      style="border:4rpx solid #E8C38A;border-radius: 50rpx"
                      @click.stop="purchase(item)"
                    >
                      采办
                    </view>
                  </view>
                </view>
              </view>
              <view class="hW_50"></view>
            </scroll-view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
  .allList {
    width: 750rpx;
    padding: 25rpx 0 0 0;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    background: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;
  }

  .presentABouquet {
    width: 702rpx;
    background: #FFFFFF;
    overflow: hidden;

    .left {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #A0A0A0;
    }

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .all {
    width: 702rpx;
    padding: 25rpx 0 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20rpx;

    .list {
      width: 220rpx;
      background: #FEF0D0;
      border-radius: 20rpx;
      overflow: hidden;
      padding: 25rpx 0;

      .imageList {
        width: 200rpx;
        height: 130rpx;
      }

      //.description {
      //  width: 220rpx;
      //  height: 146rpx;
      //  border-radius: 0rpx 0rpx 20rpx 20rpx;

      .title {
        width: 181rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 26rpx;
        color: #52360D;
      }

      .content {
        width: 181rpx;
        background: #FAD582;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 20rpx;
        color: #52360D;
      }

      .button {
        width: 117rpx;
        height: 42rpx;
        background: #FF4206;
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        border: 3rpx solid #E8C38A;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
      }

      //}
    }
  }

  .floralLong {
    position: absolute;
    width: 750rpx;
    height: 100%;
    top: -1px;
    left: 750rpx;
  }

  .leftAnimation {
    animation: purchase 0.2s linear;
    animation-fill-mode: forwards;
  }

  .rightAnimation {
    animation: purchaseRight 0.2s linear;
    animation-fill-mode: forwards;
  }

  @keyframes purchase {
    0% {
      left: 750rpx;
    }
    100% {
      left: 0;
    }
  }

  @keyframes purchaseRight {
    0% {
      left: 0;
    }
    100% {
      left: 750rpx;
    }
  }
</style>